import {
  Component,
  Input
} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

import { Heroes } from './hero.service';

@Component({
  selector: 'hero-list-basic',
  template:`
  <ul>
    <li *ngFor="let hero of heroes"
      [@heroState]="hero.state"
      (click)="hero.toggleState()">
      {{hero.name}}
    </li>
  </ul>`,
  styleUrls:['./hero-list.component.css'],
  animations:[
    trigger('heroState',[
      state('inactive', style({
        backgrouldColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',style({
        backgrouldColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate("100ms ease-in")),
      transition('active => inactive', animate("100ms ease-out"))
    ])
  ]
})

export class HeroListBasicComponent {
  @Input() heroes: Heroes;
}
